<script setup>
import { reactive, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'

import { toast } from '@/uni_modules/uview-plus';
import { getUserInfoApi, editUserInfoApi } from '@/api/user.js';
// 数据
const data = reactive({
  show: false,
  userInfo: {},
})

onShow(() => {
  init()
})
// 初始化
function init() {
  // 获取用户信息
  getUserInfoApi({})
    .then(res => {
      data.userInfo = res.data
      // console.log('userInfo', info.userInfo)
    })
}
// 手机号脱敏
const mobile = computed(() => {
  if (!data.userInfo.mobile) return ''
  return data.userInfo.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
})
// 性别
const sex = computed(() => {
  if (!data.userInfo.sex || data.userInfo.sex == 0) return '未知'
  return data.userInfo.sex == 1 ? '男' : '女'
})
// 性别选择列表
const columns = reactive([
  [{
    label: '男',
    value: 1,
  }, {
    label: '女',
    value: 2,
  }]
]);
// 性别选择回调
const selectGender = (item) => {
  console.log(item)
  editUserInfoApi({
    sex: item.value[0].value
  })
    .then(res => {
      toast('修改成功!')
      data.show = false
      init()
    })
}
// 前往修改姓名页面
const gotoEditName = () => {
  uni.navigateTo({
    url: '/subPackage/my/info/editname?name=' + data.userInfo.nickname
  })
}
</script>

<template>
  <view class="info-page">
    <!-- 头像 -->
    <view class="info-header">
      <up-avatar :src="data.userInfo.avatar" size="90"></up-avatar>
    </view>
    <!-- 信息 -->
    <view class="info-content">
      <up-cell-group :border="false">
        <up-cell :isLink="true" :border="true" rightIcon="edit-pen" rightIconStyle="color:#ADADAD"
          @click="gotoEditName">
          <template #icon>
            <view class="label">姓名</view>
          </template>
          <template #title>
            <view class="info">
              <text>{{ data.userInfo.nickname }}</text>
            </view>
          </template>
        </up-cell>
        <up-cell :isLink="true" :border="true" rightIconStyle="color:#ADADAD" @click="data.show = true">
          <template #icon>
            <view class="label">性别</view>
          </template>
          <template #title>
            <view class="info">
              <text>{{ sex }}</text>
            </view>
          </template>
        </up-cell>
        <up-cell :isLink="false" :border="true">
          <template #icon>
            <view class="label">手机号</view>
          </template>
          <template #title>
            <view class="info">
              <text>{{ mobile }}</text>
            </view>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <!-- 选择性别 -->
    <up-picker :show="data.show" title="选择性别" :columns="columns" keyName="label" @close="data.show = false"
      confirmColor="#FFA618" @confirm="selectGender" @cancel="data.show = false"></up-picker>
  </view>
</template>

<style lang="scss" scoped>
.info-page {

  // 头像
  & .info-header {
    margin-top: 48rpx;
    display: flex;
    justify-content: center;
  }

  // 个人信息
  & .info-content {
    &::v-deep .u-cell-group {
      & .u-cell-group__wrapper {
        & .u-cell {
          & .u-line {
            margin-left: 168rpx !important;
            width: 552rpx !important;
            border-color: #F6F6F6 !important;
          }
        }
      }
    }

    & .label {
      width: 112rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }

    & .info {
      margin-left: 36rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }
}
</style>